<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/sys/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>农产品质量安全追溯系统</title>
<link rel="stylesheet" href="${path }/cms/m/mobileInquire.css">
<script type="text/javascript" src="${path }/cms/js/jquery-1.8.3.min.js"></script>
<script>
var html = document.querySelector('html');
var rem = html.offsetWidth / 6.4;
html.style.fontSize = rem + "px";
</script>
</head>
<body>
<div class="miBox">
    <div class="header">
        <img src="${path }/cms/m/images/zs1.png" alt="" />
    </div>

    <div class="feature">
        <div class="leftBox">
            <img src="${traceData.park.img }" alt="" />
        </div>
        <div class="rightBox">
            <div>${traceData.park.name }</div>
            <div>${traceData.park.remark}</div>
        </div>
    </div>
    <div class="iti">
        <div><img src="${path }/cms/m/images/left.png" alt="" /></div>
        <c:choose>
        <c:when test="${traceData.type==1 }"><div>${traceData.product.name }-种植过程</div></c:when>
        <c:when test="${traceData.type==2 }"><div>${traceData.product.name }-养殖过程</div></c:when>
        <c:when test="${traceData.type==3 }"><div>${traceData.product.name }-加工过程</div></c:when>
        <c:otherwise>过程</c:otherwise>
        </c:choose>
        <div><img src="${path }/cms/m/images/right.png" alt="" /></div>
    </div>

	<div>
		<div class="messageBox">
			<c:forEach items="${traceData.records }" var="record">
            <div class="messageContent">
                <div>
                    <span>${record.linkName }</span>
                    <span>${record.workdate } ${record.worktime }</span>
                </div>
                <div class="imgHDBox">
                    <div>
                        <c:forEach items="${record.imgs }" var="img">
                        <div>
                            <img src="${img.imgPath }" alt="" />
                        </div>
                        </c:forEach>
                    </div>
                </div>
                <div class="jieSBox">
                    <p>${record.remark }</p>
                    <div class="nzDBox">
                       <c:if test="${not empty record.mat }">
                        <span>农资：</span>
                        <button onclick="showMaterial('${record.mat.mtid}','${record.mat.mtName}','${record.mat.mtImg}')">${record.mat.mtName}</button>
                       </c:if>
                    </div>
                </div>
            </div>
            </c:forEach>
		</div>
		<div class="modelBox" id="modeBox">
            <%-- <img id="modeImg" src="${path }/res/img/noimg.jpg" alt=""> --%>
        </div>
	</div>

	<c:if test="${not empty traceData.reports }">
    <div class="cpAuthentication">
        <div>产品认证</div>
        <div>
            <c:forEach items="${traceData.reports }" var="report">
            <div><img src="${report.path }" alt="" /></div>
            </c:forEach>
        </div>
    </div>
    </c:if>
</div>
<script type="text/javascript" src="${path }/cms/m/mobileInquire.js"></script>
<script type="text/javascript">
function showMaterial(mtid, mtName, mtImg){
	$('#modeBox').empty().html('<img id="modeImg" src="'+mtImg+'" alt="" />');
	modelClick();
}

</script>
</body>
</html>